<template>
	<div class="note">
		<div class="bg"></div>
		<div class="filter-box">
			<div class="box-head">
				<el-row>
					<el-col :span="16">
						<h5>笔记所属课程</h5>
						<el-dropdown  trigger="click" @command="noteFilter">
						  <el-button type="primary" >
						  {{activeCommand}}<i class="el-icon-caret-bottom el-icon--right" style="float: right;"></i>
						  </el-button>
						  <el-dropdown-menu  slot="dropdown">
							  <el-dropdown-item command='all'>全部课程</el-dropdown-item>
						    <el-dropdown-item :command="[item.id,item.name]" v-for="item in searchList" :key="item.id">{{item.name}}</el-dropdown-item>
						  </el-dropdown-menu>
						</el-dropdown>
						  <h5 style="margin-left: 60px;">精选笔记</h5>
						<el-switch
						  v-model="isSelected"
						  @change="selectedChange"
						  active-color="#393636"
						  inactive-color="#E0E0E0">
						</el-switch>
					</el-col>
				</el-row>
				</div>
				<div class="note-sort">
					<h5 class="sort-title">排序</h5>
					<div @click="takeSort(0)" :class="['sort-type',activeIndex === 0?'sort-active':'']">发布时间</div>
					<div @click="takeSort(1)" :class="['sort-type',activeIndex === 1?'sort-active':'']">浏览量</div>
					<div @click="takeSort(2)" :class="['sort-type',activeIndex === 2?'sort-active':'']">点赞数</div>
				</div>
		</div>
		<div class="wrapper">
			<Card :key="item.id" 
			v-for="item in filterList" 
			:id="item.id" 
			:title="item.title" 
			:author="item.author" 
			:course="item.course"
			:courseId="item.courseId"
			:date="item.date"
			:text="item.text"
			:situation="item.situation"
			:Selected="item.Selected"
			></Card>
		</div>
	</div>
</template>

<script>
	import note from './notes.js'
	import Card from '../assembly/noteCard.vue'
	export default {
		components:{
			Card
		},
		data(){
			return{
				noteList:note.noteList,
				searchList:note.courseList,
				filterList:[],
				isSelected:false,
				activeIndex:0,
				selectedList:[],
				tempList:[],
				activeCommand:'全部课程'
			}
		},
		created(){
			this.getAllList()
			this.takeSort(this.activeIndex)
		},
		methods:{
			takeSort(type){
				switch(type){
					case 0:
					{
						this.activeIndex = 0;
						this.filterList.sort((a,b)=>{return b.date-a.date})
					}
					break;
					case 1:
					{
						this.activeIndex = 1;
						this.filterList.sort((a,b)=>{return b.situation[0]-a.situation[0]})
					}
					break;
					case 2:
					{
						this.activeIndex = 2;
						this.filterList.sort((a,b)=>{return b.situation[1]-a.situation[1]})
					}
					break;
				}
			},
			noteFilter(id){
				if(id === 'all')
				{
					this.getAllList()
					this.activeCommand = '全部课程'
					if(this.isSelected)
					this.selectedChange()
					return 
				}
				this.activeCommand = id[1]
				this.filterList = []
				this.noteList.filter(item => {
					if(item.courseId === id[0])
					{
						this.filterList.push(item)
					}
				})
				if(this.isSelected)
				this.selectedChange()
			},
			getAllList(){
				this.filterList = this.noteList
			},
			selectedChange(){
				
				let list = []
				//console.log(this.filterList) 
				if(this.isSelected)
				{
					this.tempList = this.filterList
					this.filterList.forEach(item =>  {
						if( item.Selected === true )
						{
							list.push(item)
						}
					})
					this.filterList = list
				}
				else
				{
				this.filterList = this.tempList
				this.tempList = []
				}
				//console.log(this.filterList)
				
			},
			checkSelected(bl){
				
			}
		}
	}
</script>

<style>
	h5{
		display: inline-block;
		margin-right: 10px;
		vertical-align: middle;
	}
	.note{}
	.bg{
		    min-height: 9.3125rem;
		    margin: 0;
		    background: #989899 url(http://ife.baidu.com/2018/asset/common/img/noteDetailBg_2939736.jpg) 0 0 no-repeat;
		    background-size: cover;
	}
	.filter-box{
		max-width: 60.25rem;
		margin: -6.375rem auto 1.875rem;
		background: #fff;
		box-shadow: 0 1px 4px 1px rgba(0,0,0,.08);
		border-radius: 0;
		border: none;
	}
	.box-head{
		height: auto;
		    padding: .625rem 2rem;
	}
	.box-head .el-switch{
	display: inline-block;
	}
	.wrapper{
		width: 100%;
		height: auto;
	}
	 .note .el-dropdown{
		display: inline-block;
	}
	.note .el-button{
		padding: .375rem 1.125rem .375rem .75rem;
		width: 20rem;
		min-width: 7.5rem;
		height: 3.125rem;
		background: #f8f8f9;
		border: 1px solid #ececec;
		box-sizing: border-box;
		text-align: left;
		border-radius: 3px;
		color: #222222;
	}
	.note-sort{
		    padding: .1875rem 2rem 0;
		    line-height: 3rem;
	}
	.sort-title{
		margin: 0;
		    display: inline-block;
		    margin-right: 3.125rem;
			border-bottom: .1875rem solid transparent;
	}
	.sort-type{
		    display: inline-block;
		    margin-right: 3.75rem;
		    color: #aeaeae;
		    cursor: pointer;
		    border-bottom: .1875rem solid transparent;
			font-size: 14px;
			font-weight: 200;
	}
	.sort-active{
		color: #222222;
		border-bottom: .1875rem solid #222222;
	}
</style>
